const RESOLUSION_MAPPING = {
    1200: 32,
    800: 28,
    500: 18,
    400: 16,
    300: 13,
};

let nav_status = false;
let boundary = [0, 0];
let lastPositionY = 0;

let closeBtn = document.getElementsByClassName('close-btn')[0];
let bottom_nav = document.getElementsByClassName('content-footer')[0];


function attemptShowUp(positionY) {
    let currentStatus = isInContent(positionY);
    if (currentStatus && !nav_status) {
        doSetNavAndBackground();
        nav_status = true;
    }
    if (!currentStatus && nav_status){
        doHideNavAndBackground();
        nav_status = false;
    }
}

function doHideNavAndBackground() {
    let bottom = document.getElementsByClassName('content-footer')[0];
    closeBtn.style.backgroundColor='#f3f3f3';
    closeBtn.style.color='#a1a1a1';
    bottom.style.animation='hideBar .4s forwards';
}

function doSetNavAndBackground() {
    let bottom = document.getElementsByClassName('content-footer')[0];
    closeBtn.style.backgroundColor='gray';
    closeBtn.style.color='white';
    bottom.style.animation='showBar .4s forwards';
}

function calculateBoundary() {
    let width = window.innerWidth;
    let bottom = document.getElementsByClassName('footer')[0];
    // 注意遍历的顺序按字符串从小到大排列
    let before = 0;
    for (let index in RESOLUSION_MAPPING) {
        if (before < width && parseInt(index) > width) {
            boundary[0] = RESOLUSION_MAPPING[index] * 20;
            boundary[1] = bottom.offsetTop - window.innerHeight;
            break;
        }
        before = index;
    }
}

function isInContent(positionY) {
    return (positionY > boundary[0] && positionY < boundary[1]);
}

calculateBoundary();
setInterval(()=>{
    let positionY = window.pageYOffset;
    if (lastPositionY !== window.pageYOffset) {
        attemptShowUp(positionY);
    }
    lastPositionY = positionY;
}, 500);
